<template>
    <svg class="svg-icon" :class="className" :style="svgStyle" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
    export default {
        name: 'svg-icon',
        props: {
            iconClass: {
                type: String,
                required: true
            },
            className: {
                type: String,
                default: ''
            },
            w: {
                type: [Number, String]
            },
            h: {
                type: [Number, String]
            },
            color: {
                type: String
            }
        },
        computed: {
            iconName() {
                return `#icon-${this.iconClass}`
            },
            svgStyle() {
                let style = {}
                if (this.w) style.width = `${this.w}px`;
                if (this.h) style.height = `${this.h}px`;
                if (this.color) {
                    style.stroke = this.color;
                    style.fill = this.color;
                }
                return style;
            }
        }
    }
</script>

<style scoped>
    .svg-icon {
        vertical-align: middle;
        /* fill: currentColor; */
        overflow: hidden;
    }
</style>